<template>
	<view class="home">
		<!-- 顶部tabs切换 -->
		<view class="home-header-one ff-color-fff ff-width-100">
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-bg-blue ff-width-100">
				<view class="home-header-one-left ff-align-items-one">
					<view class="ff-margin-right-20"
						:class="{ 'ff-font-17': tabberTypeOne, 'ff-font-weight-600': tabberTypeOne }"
						@click="tabberTypeClick(1)">技术服务机构</view>
					<view :class="{ 'ff-font-17': tabberTypeTwo, 'ff-font-weight-600': tabberTypeTwo }"
						@click="tabberTypeClick(2)">需求推荐</view>
				</view>
				<view class="home-header-one-right" @click.stop="searchClick">
					<image class="animate__animated animate__zoomIn"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home_search.png">
					</image>
				</view>
			</view>
			<!-- tabs类型切换 -->
			<u-tabs name="cate_name" active-color="#3178FF" :list="tabsList" :is-scroll="false" :current="tabCurrent"
				@change="changeType"></u-tabs>
			<f-notice />
		</view>
		<!-- 内容部分 -->
		<view class="ff-padding-10 home-content ff-margin-top-95 ff-padding-bottom-40">
			<view v-if="InstitutionsList.length > 0">
				<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
					@click="organizationClick(item)" v-for="(item, index) of InstitutionsList" :key="index">
					<view class="home-content-head ff-margin-right-15 ff-border-radius-9">
						<image
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/default_avatar.png"
							mode=""></image>
					</view>
					<view class="home-content-detailed">
						<view class="ff-ellipsis-1 ff-font-15 ff-font-weight-600 ff-line-height-1-1 ff-width-250">
							{{ item.orgName }}
						</view>
						<view class="ff-flex ff-margin-top-9 ff-margin-bottom-8 ff-font-13">
							<view class="ff-font-13 home-content-detailed-fraction ff-flex">
								<view class="ff-color-fff">{{ item.registerNum !== null ? item.registerNum : 0 }}</view>
								一消证书
							</view>
							<view class="ff-font-13 ff-margin-left-10 home-content-detailed-fraction ff-flex">
								<view class="ff-color-fff">{{ item.operatorNum !== null ? item.operatorNum : 0 }}
								</view>
								操作员证书
							</view>
						</view>
						<view class="ff-flex ff-font-12 ff-color-gray-one home-content-detailed-address">
							<view class="ff-align-items-one">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
									mode=""></image>
								<view class="ff-margin-left-2 ff-ellipsis-1">距离您{{ item.nearest / 1000 }}km |
									{{ item.orgAddr == null ? '/' : item.orgAddr }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<!-- 登录or注册按钮 -->
		<view class="home-footer-btn ff-flex">
			<view class="home-footer-btn-reg animate__animated animate__bounceInLeft"><u-button @click="goRegister"
					type="warning">注册</u-button></view>
			<view class="home-footer-btn-log animate__animated animate__bounceInRight"><u-button @click="goLogin"
					type="primary">登录</u-button></view>
		</view>
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
		<!-- -----------------------------弹框区----------------------------------------->
		<!-- 用户授权提示弹框 -->
		<u-modal v-model="authorityModal" title="温馨提示" @confirm="userAuthorityConfirm"
			:content-style="{ 'line-height': '1.5' }" show-cancel-button="true" content="为了更好为您服务，我们需要获取您的微信授权！" />
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
		<!-- 提示登录弹框 -->
		<u-modal v-model="locationData" @confirm="loginConfirm" title="温馨提示" show-cancel-button="true"
			:content-style="{ 'line-height': '1.5' }" content="无法查看当前需求推荐业务, 需要先登录! 是否登录？" />
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'Home',
		components: {},
		data() {
			return {
				authorityModal: false, // 授权个人信息弹框显/隐
				locationModal: false, // 定位失败弹框显/隐
				locationData: false, // 是否登录弹框显/隐
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				tabberTypeOne: true, // tabber替换1
				tabberTypeTwo: false, // tabber替换2
				// tabs类型切换
				tabsList: [{
					cate_name: '离我最近'
				}, {
					cate_name: '最新注册'
				}],
				tabCurrent: 0,
				InstitutionsList: [], // 服务机构列表数据
				// 机构列表需要的参数
				params: {
					serviceType: 1, // 业务类型，1-维保，2-评估
					sort: {
						type: 1, // 排序类型默认选择 , 0:最新注册， 1:离我最近， 3:证书数量
						longitude: '',
						latitude: ''
					},
					current: 1,
					size: 7
				},
				noData: false // 没有更多数据了：显/隐
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		computed: {
			...mapState(['isUserState'])
		},
		onLoad() {
			let that = this;
			// 获取缓存中是否是登录状态
			let isUserState = uni.getStorageSync('isUserState');
			let roleStatus = uni.getStorageSync('roleStatus')
			// console.log(uni.getStorageSync('unserInfo'))
			if (isUserState) {
				if (roleStatus == 4 || roleStatus == 5) {
					this.$pageJump.reLaunch('/pages/supervise/index'); // 跳转到监管页面
				} else {
					this.$pageJump.reLaunch('/pages/homeCentral/Central'); // 跳转到中心页面
				}
			}

			// 判断用户是否授权
			let userAuthority = uni.getStorageSync('userAuthority') || 'false';
			if (userAuthority == 'false') {
				that.authorityModal = true; // 调取弹框
			}
			// 获取经纬度
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log('当前位置的经度-----：', res);
					that.params.sort.latitude = res.latitude;
					that.params.sort.longitude = res.longitude;
					that.getInstitutionsList(); // 获取服务机构列表数据
				},
				fail() {
					// console.log('位置定位失败返回----', error);
					that.locationModal = true;
				}
			});
		},
		// 上拉加载
		onReachBottom() {
			this.params.current++;
			this.getInstitutionsList(); // 获取的数据列表
		},
		// 下拉刷新
		async onPullDownRefresh() {
			let that = this;
			that.params.current = 1;
			await that.getInstitutionsList(); // 获取的数据列表
			setTimeout(() => {
				that.$refs.uToast.show({
					title: '刷新成功',
					type: 'success'
				});
				uni.stopPullDownRefresh(); // 停止刷新
			}, 100);
		},
		methods: {
			/*  -------------------------------  用户授权模块  ------------------------------- */
			// 用户点击了授权操作
			userAuthorityConfirm() {
				uni.getUserProfile({
					desc: '您即将授权消防维保技术小程序',
					success(res) {
						// console.log('用户同意了授权-------', res);
						uni.setStorageSync('userAuthority', res.userInfo);
					},
					fail: err => {
						// console.log('用户拒绝了授权-------', err);
					}
				});
			},
			/* ---------------------------------  业务模块  ---------------------------------- */
			// 用户点击需求推荐
			loginConfirm() {
				this.$pageJump.navigateTo('/pages/loginRegister/login/Login');
			},
			// 点击tabber切换类型
			tabberTypeClick(type) {
				if (type == 1) {
					this.params.serviceType = 1;
					this.tabberTypeOne = true;
					this.tabberTypeTwo = false;
					return;
				}
				if (type == 2) {
					this.locationData = true;
					// this.tabberTypeOne = false;
					// this.tabberTypeTwo = true;
					// return;
				}
			},
			// 点击切换tabs类型选择
			changeType(index) {
				let that = this;
				that.tabCurrent = index
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 1000
				});
				if (that.tabCurrent == 0) {
					that.params.sort.type = 1;
				} else if (that.tabCurrent == 1) {
					that.params.sort.type = 0;
				}
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						// console.log('当前位置的经度-----：', res);
						that.params.sort.latitude = res.latitude;
						that.params.sort.longitude = res.longitude;
						that.InstitutionsList = [];
						that.params.current = 1;
						that.getInstitutionsList(); // 请求机构服务列表数据
					},
					fail(error) {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			/* ---------数据请求--获取机构服务列表数据----------- */
			async getInstitutionsList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/serviceOrg/page',
					data: this.params
				});
				// console.log('服务机构列表数据-----', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.InstitutionsList = [];
					} else if (infoList.length < 5 && this.params.current == 1) {
						// console.log('首次加载有数据，但小于5条');
						this.noData = true;
						this.InstitutionsList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.InstitutionsList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.InstitutionsList = this.InstitutionsList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 进入搜索页面
			searchClick() {
				this.$pageJump.navigateTo('/pages/common/home/homeSearch');
			},
			// 去注册页面
			goRegister() {
				this.$pageJump.navigateTo('/pages/loginRegister/register/loginRegister');
			},
			// 去登录页面
			goLogin() {
				this.$pageJump.navigateTo('/pages/loginRegister/login/Login');
			},
			// 点击进入公司详情页
			organizationClick(item) {
				this.$pageJump.navigateTo('/pages/common/home/homeDetails?id=' + item.id + '&nearest=' + item
					.nearest);
			}
		},
		computed: {
			tabberStyle() {
				return `top: ${this.customBar}px;`;
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	@import './components/home.scss';

	.ff-margin-top-95 {
		margin-top: 255rpx;
	}

	.home-content-detailed {
		width: 500rpx;
	}
</style>